<template>
  <div class="bridge-main" v-loading="isLoading">
    <!-- v-loading="isLoading" -->
    <!-- <van-tabs v-model:active="active" @click-tab="getData()">
      <van-tab title="桥梁情况"></van-tab>
      <van-tab title="航道情况"></van-tab>
      <van-tab title="辖区情况"></van-tab>
    </van-tabs> -->
    <div class="choose">
      <div v-if="active === 2">
        <van-field
          v-model="WaterwayListValue"
          is-link
          readonly
          placeholder="选择区域中心"
          arrow-direction="down"
          @click="show0 = true"
        />
        <van-popup v-model:show="show0" round position="bottom">
          <van-picker
            :columns="WaterwayListData"
            @cancel="show0 = false"
            @confirm="setWaterwayListVal"
            :columns-field-names="{
              text: 'name',
              value: 'name',
            }"
          />
        </van-popup>
      </div>
      <div v-if="active === 1">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          placeholder="请选择航道"
          arrow-direction="down"
          @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择航道"
            :options="options"
            @close="show = false"
            @change="onChange"
            @finish="onFinish"
          />
        </van-popup>    
      </div>
      <div v-if="active === 0">
        <van-field
          v-model="fieldValue2"
          is-link
          readonly
          arrow-direction="down"
          placeholder="请选择桥梁"
          @click="show2 = true"
        />
        <van-popup v-model:show="show2" round position="bottom">
          <van-cascader
            v-model="cascaderValue2"
            title="请选择桥梁"
            :options="options2"
            @close="show2 = false"
            @change="onChange2"
            @finish="onFinish2"
          />
        </van-popup>
      </div>
    </div>
    <div class="bridge-main-content">
      <div class="bridge-img">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="bridge-num">
          <div class="num-item">
            <img
              src="../../../static/images/bridgeAreaControl/icon-dayu5k.png"
              alt=""
            />数量 大于5000(艘)
          </div>
          <div class="num-item">
            <img
              src="../../../static/images/bridgeAreaControl/icon-xiaoyu5k.png"
              alt=""
            />数量 小于5000(艘)
          </div>
        </div>
      </div>
      <div class="bridge-list-container">
        <div class="bridge-list">
          <div class="item-head">
            <div class="head-title">态势分析</div>
          </div>
          <div class="item-situation">
            <div class="situation-title">船舶总体态势分析</div>
            <div class="situation-tabs">
              <div
                class="tabs-item"
                v-for="item in cbtsActiveList"
                :key="item.name"
                :class="cbtsActive == item.value ? 'active' : ''"
                @click="(cbtsActive = item.value), initeChart1()"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="situation-echart">
              <div class="echart" id="echart1"></div>
            </div>
            <div class="situation-list">
              <div
                class="list-item"
                v-for="(item, index) in echartlist"
                :key="index"
              >
                <div class="item-title">
                  <span
                    class="dot"
                    :style="'background-color:' + item.color"
                  ></span
                  >{{ item.name }}
                </div>
                <div class="item-value">{{ item.value }}</div>
              </div>
            </div>
          </div>
          <div class="item-situation">
            <div class="situation-title">
              船舶流量态势
              <el-select
                v-model="selectType"
                filterable
                placeholder="请选择"
                class="selectTypeClass"
                @change="setSelectType"
              >
                <el-option
                  v-for="item in selectTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="situation-tabs">
              <div
                class="tabs-item"
                v-for="item in cbtsActiveList"
                :key="item.name"
                :class="cbllActive == item.value ? 'active' : ''"
                @click="(cbllActive = item.value), getshipllAnalysDataFn()"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="situation-echart2">
              <div class="echart" id="echart2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick } from "vue";
import { closeToast, showLoadingToast,showToast } from "vant";
import {
  getBmCenter,
  getPointWaterway,
  getPointBridge,
  shipTonAnalys,
  shipllAnalys,
  shipllAnalysWeek,
  shipllAnalysMonth,
  shipllAnalysYear,
} from "../../../utils/bridgeAreaControlApi";
import OlArc from "../component/shipIndex_map.vue";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  DataZoomComponent,
  TitleComponent,
} from "echarts/components";
import { BarChart, PieChart, LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import * as echarts from "echarts/core";
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  PieChart,
  LineChart,
  CanvasRenderer,
  TitleComponent,
  DataZoomComponent,
]);
const echartlist = ref([
  {
    value: 0,
    name: "0-500吨",
    color: "#6B9BFD",
  },
  {
    value: 0,
    name: "500-1000吨",
    color: "#4ED9A0",
  },
  {
    value: 0,
    name: "1000-1500吨",
    color: "#FFCB32",
  },
  {
    value: 0,
    name: "1500-2000吨",
    color: "#F17665",
  },
  {
    value: 0,
    name: "2000-3000吨",
    color: "#B278DC",
  },
  {
    value: 0,
    name: "3000吨以上",
    color: "#6DBEFF",
  },
]);
const selectType = ref(1);
const OlArcRef = ref(null);
const selectTypeList = ref([
  {
    value: 1,
    name: "上下行船舶统计",
  },
  {
    value: 2,
    name: "空重载船舶统计",
  },
]);
const isLoading = ref(false);
const loadingNum = ref(0);
const active = ref(0);
const cbtsActive = ref(1);
const cbllActive = ref(1);
const cbtsActiveList = ref([
  {
    title: "当天",
    value: "0",
  },
  {
    title: "当周",
    value: "1",
  },
  {
    title: "当月",
    value: "2",
  },
  {
    title: "当年",
    value: "3",
  },
]);
const WaterwayListData = ref([]);
const WaterwayListValue = ref("");
const setWaterwayListVal = (val) => {
  WaterwayListValue.value = val.selectedValues[0];
  show0.value = false;
  getData();
};
const setSelectType = (val) => {
  selectType.value = val;
  getshipllAnalysDataFn();
};
// loading
const showLoading = () => {
  isLoading.value = true;
  loadingNum.value++;
};
const hiddenLoading = () => {
  loadingNum.value--;
  if (loadingNum.value === 0) {
    isLoading.value = false;
    loadingNum.value = 0;
  }
};
// 联级选框
const show0 = ref(false);
const show = ref(false);
const show2 = ref(false);
const cascaderValue = ref("");
const fieldValue = ref("");
const options = ref([]);
const options2 = ref([]);
const cascaderValue2 = ref("");
const fieldValue2 = ref("");
const onChange = ({ value, tabIndex, selectedOptions }) => {
  let { index } = selectedOptions[0];
  if (tabIndex == "0") {
    showLoadingToast("加载中...");
    getPointWaterway({ bmpName: value })
      .then((res) => {
        if (res.data.length == "0") {
          setTimeout(() => {
            showToast("当前选项找不到数据");
          }, 500);
        }
        let children = res.data?.map((ele, currentIndex) => {
          return {
            text: ele.name,
            value: ele.name,
            index: currentIndex,
            plantIndex: index,
          };
        });
        console.log(children);
        options.value[index].children = children || [];
      })
      .finally(() => {
        closeToast();
      });
  }
};
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  fieldValue.value = selectedOptions[1].value;
  getData();
};
const onChange2 = ({ value, tabIndex, selectedOptions }) => {
  let { index } = selectedOptions[0];
  if (tabIndex == "0") {
  //   showLoadingToast("加载中...");
  //   getPointWaterway({ bmpName: value })
  //     .then((res) => {
  //       if (res.data.length == "0") {
  //         setTimeout(() => {
  //           showToast("当前选项找不到数据");
  //         }, 500);
  //       }
  //       let children = res.data?.map((ele, currentIndex) => {
  //         return {
  //           text: ele.name,
  //           value: ele.name,
  //           index: currentIndex,
  //           plantIndex: index,
  //           children: [],
  //         };
  //       });
  //       console.log(children);
  //       options2.value[index].children = children || [];
  //     })
  //     .finally(() => {
  //       closeToast();
  //     });
  // } else if (tabIndex == "1") {
  //   showLoadingToast("加载中...");
  //   let { plantIndex, index } = selectedOptions[1];
    getPointBridge({ bmpName: value }).then((res) => {
      if (res.data.length == "0") {
        setTimeout(() => {
          showToast("当前选项找不到数据");
        }, 500);
      }
      let children2 = res.data?.map((ele) => {
        return {
          text: ele.name,
          value: ele.name,
        };
      });
      // console.log(options2.value[plantIndex].children[index]);
      // if (options2.value[plantIndex].children[index]) {
      //   options2.value[plantIndex].children[index].children = children2 || [];
      // }
      options2.value[index].children = children2 || [];
    })
    .finally(() => {
      closeToast();
    });
  }
};
const onFinish2 = ({ selectedOptions }) => {
  show2.value = false;
  // fieldValue2.value = selectedOptions[2].value;
  fieldValue2.value = selectedOptions[1].value;
  getData();
};

const getBmCenterDataFn = (data) => {
  return new Promise((resolve, reject) => {
    // showLoading();
    getBmCenter(data)
      .then((res) => {
        if (res.code === 200 && res.data.length) {
          WaterwayListData.value = res.data;
          // WaterwayListValue.value = WaterwayListData.value[0].name;
          WaterwayListValue.value = "中山航道事务中心";
          options.value = res.data.map((ele, index) => {
            return {
              text: ele.name,
              value: ele.name,
              index: index,
              children: [],
            };
          });
          options2.value = options.value;
          fieldValue2.value = "磨刀门主桥";
          fieldValue.value = "桂州水道";
          setTimeout(() => {
            OlArcRef.value?.initMap({
              bridge: fieldValue2.value,
            });
          }, 100);
          resolve();
          // getPointWaterway({ bmpName: WaterwayListValue.value }).then((res) => {
          //   fieldValue.value = res.data[0]?.name;
          //   getPointBridge({ waterway: fieldValue.value }).then((res) => {
          //     fieldValue2.value = res.data[0]?.name;
          //     resolve();
          //   });
          // });
        }
      })
      .finally(() => {
        // hiddenLoading();
      });
  });
};

const shipTonAnalysData = ref({
  today: {},
  thisWeek: {},
  thisMonth: {},
  thisYear: {},
});
const getshipTonAnalysDataFn = () => {
  showLoading();
  let reqData = { };
  if (active.value == "0") {
    reqData.bridge = fieldValue2.value;
    OlArcRef.value?.initMap({
      bridge: fieldValue2.value,
    });
  } else if (active.value == "1") {
    reqData.waterway = fieldValue.value;
    OlArcRef.value?.initMap({
      waterway: fieldValue.value,
    });
  } else if (active.value == "2") {
    reqData.bmpName = WaterwayListValue.value;
    OlArcRef.value?.initMap({
      bmpName: WaterwayListValue.value,
    });
  }
  shipTonAnalys(reqData)
    .then((res) => {
      if (res.code === 200 && res.data) {
        shipTonAnalysData.value = res.data;
        setTimeout(() => {
          // initBarChart();
          initeChart1();
        }, 100);
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const shipllAnalysData = ref([]);
const getshipllAnalysDataFn = () => {
  showLoading();
  let reqData = { type: selectType.value };
  if (active.value == "0") {
    reqData.bridge = fieldValue2.value;
  } else if (active.value == "1") {
    reqData.waterway = fieldValue.value;
  } else if (active.value == "2") {
    reqData.bmpName = WaterwayListValue.value;
  }
  if (cbllActive.value == "0") {
    shipllAnalys(reqData)
      .then((res) => {
        getshipllAnalysDataFnRes(res);
      })
      .finally(() => {
        hiddenLoading();
      });
  } else if (cbllActive.value == "1") {
    shipllAnalysWeek(reqData)
      .then((res) => {
        getshipllAnalysDataFnRes(res);
      })
      .finally(() => {
        hiddenLoading();
      });
  } else if (cbllActive.value == "2") {
    shipllAnalysMonth(reqData)
      .then((res) => {
        getshipllAnalysDataFnRes(res);
      })
      .finally(() => {
        hiddenLoading();
      });
  } else if (cbllActive.value == "3") {
    shipllAnalysYear(reqData)
      .then((res) => {
        getshipllAnalysDataFnRes(res);
      })
      .finally(() => {
        hiddenLoading();
      });
  }
};
const getshipllAnalysDataFnRes = (res) => {
  if (res.code === 200 && res.data) {
    res.data?.forEach((ele) => {
      ele.tgsj = ele.tgsj.length > 7 ? ele.tgsj?.slice(5, 10) : ele.tgsj;
    });
    shipllAnalysData.value = res.data;
    setTimeout(() => {
      initeChart2();    
    }, 100);
  }
};
const getData = async () => {
  getshipTonAnalysDataFn();
  getshipllAnalysDataFn();
};
onMounted(async () => {
  isLoading.value = true;
  // WaterwayListData.value = await getWaterwayListDataFn();
  // WaterwayListValue.value = WaterwayListData.value[0].hangdao;
  // getData();
  await getBmCenterDataFn();

  getData();
  // setTimeout(() => {
  //   initeChart1();
  //   initeChart2();
  // }, 100);
});

const initeChart1 = () => {
  let barChart = echarts.getInstanceByDom(document.getElementById("echart1"));
  if(barChart != null && barChart != "" && barChart != undefined){
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById("echart1"));
  let option;
  let xrdata = {};
  if (cbtsActive.value == "0") {
    xrdata = shipTonAnalysData.value.today;
  } else if (cbtsActive.value == "1") {
    xrdata = shipTonAnalysData.value.thisWeek;
  } else if (cbtsActive.value == "2") {
    xrdata = shipTonAnalysData.value.thisMonth;
  } else if (cbtsActive.value == "3") {
    xrdata = shipTonAnalysData.value.thisYear;
  }

  echartlist.value = [
    {
      value: xrdata.ton1,
      name: "0-500吨",
      color: "#6B9BFD",
    },
    {
      value: xrdata.ton2,
      name: "500-1000吨",
      color: "#4ED9A0",
    },
    {
      value: xrdata.ton3,
      name: "1000-1500吨",
      color: "#FFCB32",
    },
    {
      value: xrdata.ton4,
      name: "1500-2000吨",
      color: "#F17665",
    },
    {
      value: xrdata.ton5,
      name: "2000-3000吨",
      color: "#B278DC",
    },
    {
      value: xrdata.ton6,
      name: "3000吨以上",
      color: "#6DBEFF",
    },
  ];
  let color = [
    [
      { offset: 0, color: "#6B9BFD" },
      { offset: 1, color: "#6B9BFD" },
    ],
    [
      { offset: 0, color: "#4ED9A0" },
      { offset: 1, color: "#4ED9A0" },
    ],
    [
      { offset: 0, color: "#FFCB32" },
      { offset: 1, color: "#FFCB32" },
    ],
    [
      { offset: 0, color: "#F17665" },
      { offset: 1, color: "#F17665" },
    ],
    [
      { offset: 0, color: "#B278DC" },
      { offset: 1, color: "#B278DC" },
    ],
    [
      { offset: 0, color: "#6DBEFF" },
      { offset: 1, color: "#6DBEFF" },
    ],
  ];
  echartlist.value.forEach((item, index) => {
    item.itemStyle = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color[index]),
    };
  });
  option = {
    color,
    title: {
      text: "总数",
      subtext: xrdata.totalShip || "0",
      textStyle: {
        color: "#595959",
        fontSize: 12,
        align: "center",
      },
      subtextStyle: {
        fontSize: 21,
        color: "#165DFF",
      },
      x: "center",
      y: "40%",
    },

    tooltip: {
      trigger: "item",
      show: true,
    },
    series: [
      {
        type: "pie",
        minAngle: 5,
        startAngle: 10, //起始角度
        labelLine: {
          show: true,
          length: 20,
          length2: 10,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          show: false,
        },
        center: ["50%", "50%"],
        radius: ["55%", "90%"],
        data: echartlist.value,
      },
    ],
  };
  option && barChart.setOption(option);
};
const initeChart2 = () => {

  let barChart = echarts.getInstanceByDom(document.getElementById("echart2"));
  if(barChart != null && barChart != "" && barChart != undefined){
    barChart.dispose();
  }
  barChart = echarts.init(document.getElementById("echart2"));
  let option;
  let rawDataTitle = [];
  let rawData = [[], []];
  shipllAnalysData.value?.forEach((ele) => {
    if(selectType.value == 1){
      rawData[0].push(ele.up);
      rawData[1].push(ele.down);
    }else{
      rawData[0].push(ele.zhongdai);
      rawData[1].push(ele.kongzai);
    }    
    rawDataTitle.push(ele.tgsj);
  });

  const totalData = [];
  for (let i = 0; i < rawData[0].length; ++i) {
    let sum = 0;
    for (let j = 0; j < rawData.length; ++j) {
      sum += rawData[j][i];
    }
    totalData.push(sum);
  }
  const series = ["Direct", "Mail Ad"].map((name, sid) => {
    return {
      name,
      type: "bar",
      stack: "total",
      barWidth: "60%",
      label: {
        show: true,
        formatter: (params) => Math.round(params.value * 1000) / 10 + "%",
      },
      data: rawData[sid].map((d, did) =>
        totalData[did] <= 0 ? 0 : d / totalData[did]
      ),
    };
  });
  if(rawDataTitle.length === 0){
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          color: "#8c8c8c",
          fontSize: 12,
          fontWeight: 500
        }
      }
    };
  }else{
    option = {
      tooltip: {
        // trigger: "axis",
        trigger: "item",
        axisPointer: {
          type: "shadow",
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        itemWidth: 6, // 设置图例项的宽度
        itemHeight: 6, // 设置图例项的高度
        textStyle: {
          fontSize: "12px",
          color: "rgba(0,0,0,0.85)",
        },
        itemGap: 4,
        icon: "circle", //图例设置成圆形
      },
      grid: {
        top: "20%",
        left: "10%",
        right: "10%",
        bottom: "10%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          startValue: 0,
          endValue: 9,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "10px",
            color: "rgba(0,0,0,0.45)",
          },
          data: rawDataTitle,
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            interval: 0,
            rotate: -45, //倾斜的程度
            // formatter: function (value) {
            //   //x轴的文字改为竖版显示
            //   var str = value.split("");
            //   return str.join("\n");
            // },
          },
          axisPointer: {
            show: true,
            type: "none",
            label: {
              show: false,
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "船舶流量(艘)",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "14px",
            color: "rgba(0,0,0,0.45)",
          },
          // nameLocation: "center",
          nameGap: 15,
        },
      ],
      series: [
        {
          name: selectType.value == 1?"上行":"重载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: 10,
          color: "#6b9bfd",
          data: rawData[0],
        },
        {
          name: selectType.value == 1?"下行":"空载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: 10,
          color: "#4ed9a0",
          data: rawData[1],
        },
      ],
    };
  }
  option && barChart.setOption(option);
};
</script>

<style lang="scss" scoped>
::v-deep.el-select-dropdown__item {
  width: calc(100vw - 40px);
}
.bridge-main {
  position: relative;
  height: 100%;
  .bridge-main-content {
    height: calc(100% - 50px - 51.5px);
    overflow-y: scroll;
    padding: 16px 20px;
    box-sizing: border-box;
  }
}
.bridge-img {
  width: 100%;
  height: 208px;
  border-radius: 8px 8px 8px 8px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  .bridge-num {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #6eabbe;
    font-size: 10px;
    .num-item {
      display: flex;
      align-items: center;
    }
    img {
      width: 12px;
      height: 12px;
      margin-right: 3px;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}

.bridge-list-container {
  .bridge-list {
    overflow: hidden;
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
    position: relative;
    // overflow: hidden;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .item-head {
      display: flex;
      justify-content: space-between;
      position: relative;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      .head-title {
        font-size: 14px;
      }
      .head-icon {
        width: 16px;
        height: 16px;
        // position: absolute;
        // right: 8px;
        // top: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .head-more {
        display: flex;
        align-items: center;
        color: #abadb1;
        font-size: 12px;
        img {
          width: 4px;
          height: 6px;
          margin-left: 4px;
        }
      }
    }
    .item-situation {
      padding: 0 8px;
      .situation-title {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-weight: 500;
        color: #262626;
        height: 30px;
        line-height: 30px;
        position: relative;
        font-size: 14px;
        padding-left: 8px;
        box-sizing: border-box;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 18px;
        &::after {
          content: "";
          width: 4px;
          height: 12px;
          background-color: #165dff;
          position: absolute;
          top: 14px;
          left: 0;
          transform: translateY(-50%);
        }
      }

      .situation-tabs {
        margin: 8px auto 0;
        // border-left: 1px solid #ececec;
        display: flex;
        overflow: hidden;
        justify-content: center;
        .tabs-item {
          width: 60px;
          font-size: 14px;
          color: #262626;
          text-align: center;
          line-height: 32px;
          border-top: 1px solid #ececec;
          border-bottom: 1px solid #ececec;
          border-right: 1px solid #ececec;
          box-sizing: border-box;
        }
        .tabs-item:nth-child(1) {
          border-left: 1px solid #ececec;
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
        }
        .tabs-item:nth-child(4) {
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
        }
        .active {
          background-color: #165dff;
          color: #ffffff;
        }
      }

      .situation-echart {
        width: 100%;
        height: 170px;
        margin-top: 10px;
        .echart {
          width: 100%;
          height: 100%;
        }
      }
      .situation-echart2 {
        width: 100%;
        height: 200px;
        margin-top: 20px;
        .echart {
          width: 100%;
          height: 100%;
        }
      }

      .situation-list {
        padding: 0 10px;
        .list-item {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #8c8c8c;
          line-height: 30px;
          .item-title {
            .dot {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: #f7f9fc;
              margin-right: 10px;
            }
          }

          .item-value {
          }
        }
      }
    }
    .item-situation:nth-child(2) {
      margin-top: 20px;
    }
  }
}
.margintop8 {
  margin-top: 8px !important;
}
.margintop16 {
  margin-top: 16px !important;
}
::-webkit-scrollbar {
  display: none;
}
.Empty {
  text-align: center;
  width: 100%;
  color: #8c8c8c;
  line-height: 120px;
}
.choose {
  width: 100%;
  height: 50px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  // border: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  & > div {
    background-color: #f8f9f9;
  }
  .option {
    width: 100%;
    height: 100%;
    .choose-input {
      width: 94%;
      height: 30px;
      border: none;
      border: 1px solid #dee1e6;
      text-align: center;
    }
    .choose-list {
      position: absolute;
      font-size: 12px;
      font-weight: 400;
      color: #595959;
      display: flex;
      justify-content: center;
      width: 124px;
      background: #fff;
      z-index: 999;
      width: 100%;
      .list {
        width: 94%;
        height: 130px;
        overflow-y: scroll;
        margin-top: -2px;
        border: 1px solid #d9d9d9;
        li {
          line-height: 35px;
          list-style-type: none;
        }
      }
    }
  }
}
.selectTypeClass {
  font-size: 12px !important;
  width: 150px;
  height: 20px;
}
::v-deep.el-select-dropdown__item {
  width: 140px;
}
::v-deep.el-input__inner {
  font-size: 12px;
  border: none!important;
}

::v-deep.van-field {
  background-color: #f8f9fb;
  border-radius: 8px;
}
::v-deep.el-select .el-input__wrapper {
  box-shadow:none!important;
  background-color: rgba(0, 0, 0, 0)!important;
}
::v-deep.el-select .el-input.is-focus .el-input__wrapper {
  box-shadow:none!important;
  background-color: rgba(0, 0, 0, 0)!important;
}
</style>
